<template>
	<div class="iInfo" element-loading-text="加载中" v-loading="loading">
		<div class="flex">
			<div class="lumpBox">
				<el-page-header content="权限设置" @back="$router.go(-1)"></el-page-header>
				<div class="Lbox-content">
					<el-form :model="elForm" label-width="96px" ref="elForm" style="width: 600px;">
						<el-form-item :rules="FormRule.NotNull" class="is-required" label="角色名称：" prop="role_name">
							<el-input clearable maxlength="64" placeholder="请输入角色名称" v-model.trim="elForm.role_name"></el-input>
						</el-form-item>
						<el-form-item :rules="FormRule.Power" class="is-required" label="权限设置：" prop="arr">
							<el-cascader-panel v-model="elForm.arr" @change="change" :options="options" :props="props" clearable></el-cascader-panel>
						</el-form-item>
						<el-form-item label="角色描述："><el-input :rows="3" maxlength="64" placeholder="请输入角色描述" type="textarea" v-model.trim="elForm.note"></el-input></el-form-item>
						<el-form-item class="el-btn-box">
							<el-button @click="confirm" class="el-btn" icon="el-icon-check" type="primary">确定</el-button>
							<div class="el-btn"></div>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'set_up',
	data() {
		return {
			loading: false,
			elForm: {
				role_name: '',
				note: '',
				arr: []
			},
			props: {
				multiple: true,
				emitPath: false,
				value: 'value',
				label: 'label',
				children: 'children'
			},
			options: [
				{
					value: '100',
					label: '项目统计'
				},
				{
					value: '200',
					label: '项目管理',
					children: [
						{
							value: '210',
							label: '项目详情',
							children: [
								{
									value: '211',
									label: '列表'
								},
								{
									value: '212',
									label: '添加'
								},
								{
									value: '213',
									label: '编辑'
								},
								{
									value: '214',
									label: '删除'
								}
							]
						},
						{
							value: '220',
							label: '进度详情',
							children: [
								{
									value: '221',
									label: '列表'
								},
								{
									value: '222',
									label: '添加'
								},
								{
									value: '223',
									label: '编辑'
								},
								{
									value: '224',
									label: '删除'
								}
							]
						}
					]
				},
				{
					value: '300',
					label: '权限管理',
					children: [
						{
							value: '301',
							label: '列表'
						},
						{
							value: '302',
							label: '添加'
						},
						{
							value: '303',
							label: '编辑'
						},
						{
							value: '304',
							label: '删除'
						}
					]
				}
			]
		};
	},
	components: {},
	created() {
		this.$emit('pass', '/power');
	},
	mounted() {},
	methods: {
		change(e) {
			console.log(e);
			this.isError();
		},
		confirm() {
			this.$refs['elForm'].validate(valid => {
				if (valid) {
					console.log(this.elForm);
				} else {
					this.isError();
					return false;
				}
			});
		},
		isError() {
			this.$nextTick(() => {
				if (this.elForm.arr.length == 0) {
					$('.el-form-item__error')
						.siblings('.el-cascader-panel')
						.css('border-color', '#F56C6C');
				} else {
					$('.el-form-item__error')
						.siblings('.el-cascader-panel')
						.css('border-color', '#E4E7ED');
				}
			});
		}
	}
};
</script>
